<template>
	<view class="index">
		<!-- #ifdef APP-PLUS -->
		<view class="status-top-bar"></view>
		<!-- #endif -->
		<view class="videoContent">
			<swiper class="videoSwiper" :vertical="true" @change="videoSwiperChange" :current="currentIndex">
				<swiper-item v-for="(item,index) in videoList" :item-id="item.id+'-'+index">
					<video-item :item="item" :isPlay="currentIndex==index"></video-item>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoList from "../../data/videoList.js";
	import videoItem from "../../components/video-item/video-item.vue"

	export default {
		data() {
			return {
				videoList: [],
				currentIndex: 0,
				
				videoIds: uni.getStorageSync("videoIds") || "0-0", //视频Id区间
			}
		},
		computed: {

		},
		onLoad() {
			this.videoList = uni.getStorageSync("videoList")||[];
			if(this.videoIds==null||this.videoList.length==0){
				this.getVideoList();
			}
		},
		methods: {
			getVideoURL() {
				var d = new Date();
				return `https://www.softeem.xin/s/v2/topic/list/41/${this.videoIds}/budejie-android-8.0.1/0-25.json?device=MIX&t=${Date.now()}&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1`;
			},
			videoSwiperChange(e) {
				this.currentIndex = e.detail.current;
				console.log(e.detail.current);
				if(e.detail.current==this.videoList.length-1){
					this.getVideoList();
				}
			},
			getVideoList() {
				uni.request({
					url: this.getVideoURL(),
					success: res => {
						//删除之前的视频信息
						this.videoList.splice(0,this.videoList.length-1);
						this.videoList = [...this.videoList,...res.data.list]
						this.currentIndex=0;		//重置索引
						
						if (this.videoList && this.videoList.length > 0) {
							//放入缓存
							uni.setStorageSync("videoList", this.videoList);
							this.videoIds = this.videoList[0].id + "-" + this.videoList[this.videoList.length - 1].id;
							//放入缓存
							uni.setStorageSync("videoIds", this.videoIds);
						}
					},
					complete() {
						uni.hideLoading();
					},
					fail: () => {
						uni.showToast({
							title: "获取数据失败"
						});
					}
				})
			}
		},
		components: {
			videoItem
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: auto;

		.status-top-bar {
			height: var(--status-bar-height);
			background-color: transparent;
		}

		.videoContent {
			flex: 1;

			.videoSwiper {
				height: 100%;
				width: 100%;

				swiper-item {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
